<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed">
      <div class="logo">
        <a-tooltip placement="right">
          <template #title>请登录</template>
          <a-avatar shape="circle" size="large" style="background-color: #ccc; cursor: pointer;">
            <template #icon>
              <UserOutlined />
            </template>
          </a-avatar>
        </a-tooltip>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @select="handleSelectMenu">
        <a-menu-item key="chat">
          <MessageOutlined />
          <span>聊天</span>
        </a-menu-item>
        <a-menu-item key="contact">
          <UsergroupAddOutlined />
          <span>通讯录</span>
        </a-menu-item>
        <a-menu-item key="collect">
          <InboxOutlined />
          <span>收藏</span>
        </a-menu-item>
        <a-menu-item key="file">
          <ProfileOutlined />
          <span>聊天文件</span>
        </a-menu-item>
        <a-menu-item key="circle">
          <CameraOutlined />
          <span>朋友圈</span>
        </a-menu-item>
        <a-menu-item key="video">
          <VideoCameraOutlined />
          <span>视频号</span>
        </a-menu-item>
        <a-menu-item key="settings">
          <SettingOutlined />
          <span>设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content>
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const collapsed = ref(true)
const selectedKeys = ref(['chat'])
const router = useRouter();
const handleSelectMenu = ({ item, key, selectedKeys }) => {
  selectedKeys.value = selectedKeys;
  router.push({
    name: key
  })
}
</script>
<style scoped>
.logo {
  margin: 16px;
  text-align: center;
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}</style>
